<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-on  事件的修饰符</title>
  <script src="../Vue.js"></script>
  <style>
    #inner {
      height: 400px;
      background-color: blue;
    }
  </style>
</head>
<body>
<!--&lt;!&ndash;正常情况下 在服务器看一下看看冒泡现象&ndash;&gt;-->
<!--<div id="inner" @click="inner">-->
<!--  <input id="but" type="button" value="戳一戳" @click="but">-->
<!--</div>-->

<!--&lt;!&ndash; .stop 阻止了冒泡事件&ndash;&gt;-->
<!--<div id="inner" @click="inner">-->
<!--  <input id="but" type="button" value="戳一戳" @click.stop="but">-->
<!--</div>-->


<!--&lt;!&ndash;.prevent 阻止默认事件的发生&ndash;&gt;-->
<!--<div id="inner" @click="inner">-->
<!--  <a href="http://www.baidu.com" @click.Prevent="baidu">有问题，先上百度</a>-->
<!--</div>-->


<!--&lt;!&ndash; .self 阻止了自己被动冒泡 但并没有阻止冒泡事件&ndash;&gt;-->
<!--<div id="inner" @click.self="inner">-->
<!--  <input id="but" type="button" value="戳一戳" @click="but">-->
<!--</div>-->

<!--&lt;!&ndash; .once 使得时间只发生一次&ndash;&gt;-->
<!--<div id="inner" @click="inner">-->
<!--  <input id="but" type="button" value="戳一戳" @click.once="but">-->
<!--</div>-->

<!-- .self 阻止了自己被动冒泡 但并没有阻止冒泡事件   .stop阻止别人冒泡-->

<script>
  new Vue({
    el : '#inner',
    data: {


    },
    methods : {
      but(){
        console.log('触发了戳一戳事件')
      },
      inner(){
        console.log('触发了inner事件')
      },
      baidu(){
        console.log('观察.prevent是否阻止了a标签的跳转 ')
      }
    }
  })
</script>
</body>
</html>
